<template>
  <div v-show="$route.meta.showFather">
    <div class="head">
      <Head></Head>
    </div>
    <div class="menu">
      <Menu></Menu>
    </div>
    <div>
      <Card :cardData="card1" @click="ToDetails('1738138900769878018')"/>
      <Card :cardData="card2" @click="ToDetails('1738138901411606529')"/>
      <Card :cardData="card3" @click="ToDetails('1738138901545824257')"/>
      <Card :cardData="card4" @click="ToDetails('1738138901742956546')"/>
      <Card :cardData="card5" @click="ToDetails('1738138902011392001')"/>
      <Card :cardData="card6" @click="ToDetails('1738138902212718593')"/>
      <Card :cardData="card7" @click="ToDetails('1738138902414045186')"/>
      <Card :cardData="card8" @click="ToDetails('1738138902611177474')"/>
    </div>
  </div>
  <router-view />
</template>

<script>
import Menu from "@/components/Menu.vue";
import Head from "@/components/Head.vue";
import Card from "@/components/Card.vue";
import router from "@/router/index.js";
import { useRouter } from "vue-router";
let route = useRouter();
export default {
  name: "Restaurants",

  // 局部引入自定义组件
  components: {
    Menu,
    Head,
    Card
  },
  data() {
    return {
      card1: {
        image: "src/assets/1.jpg",
        name: '第一食堂',
        mainly : '1.自选餐品、面食+各类浇头等等。\n' +
            '2.上理烘焙坊'
      },
      card2: {
        image: "src/assets/2.jpg",
        name: '第二食堂',
        mainly : '上海特色早点（四大金刚）、自选餐品（以本帮菜系为主）'
      },
      card3: {
        image: "src/assets/3.jpg",
        name: '第三食堂',
        mainly : '自选餐品'
      },
      card4: {
        image: "src/assets/4.jpg",
        name: '第四食堂',
        mainly : '基院官方指定食堂'
      },
      card5: {
        image: "src/assets/5.jpg",
        name: '第五食堂',
        mainly : '新世纪的神中神'
      },
      card6: {
        image: "src/assets/6.jpg",
        name: '思餐厅',
        mainly : '古希腊掌握最多菜品的神'
      },
      card7: {
        image: "src/assets/7.jpg",
        name: '咪呢餐厅',
        mainly : '面食、盖浇饭、炒饭等等'
      },
      card8: {
        image: "src/assets/8.jpg",
        name: '民族餐厅',
        mainly : '民族餐品（西北面食，牛羊餐品）'
      },
    };
  },
  methods: {
    ToDetails(restaurantId) {
      // 使用 router.push 进行路由导航，跳转到菜品详情页面
      console.log(restaurantId);
      console.log("点击了一下");
      router.push(`/restaurants/index/${restaurantId}`);
    },
  },
}
</script>

<style scoped>

</style>